<table align="center" style="border: 1px solid #000;">
  <tr>
    <td align="center" colspan="2"><div id="titleObject"></div></td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td valign="top"><div id="territorySalesObject"></div></td>
        </tr>
        <tr>
          <td valign="top"><div id="productLineSalesObject"></div></td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td><div id="sampleObject"></div></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<script language="javascript" type="text/javascript">

  require(['cdf/Dashboard.Blueprint', 'cdf/components/CccMetricLineChartComponent'],
    function(Dashboard, CccMetricLineChartComponent) {

    var dashboard = new Dashboard();

    var relational_01 = {
      "resultset": [
        //["London", "2010-01-01", 74],
        ["London", "2011-06-05", 72],
        ["London", "2011-06-12", 50],
        ["London", "2011-06-19", 20],
        ["London", "2011-06-26", 23],
        ["London", "2011-07-03", 72],
        ["London", "2011-07-10", 80],
        //["London", "2011-07-17", 20],
        ["London", "2011-07-26", 23],
        ["London", "2011-07-31", 72],
        ["London", "2011-08-07", 50],
        ["London", "2011-08-14", 20],
        //["London", "2011-08-21", 23],
        ["London", "2011-08-28", 20],
        //
        ["Paris", "2011-06-05", 27],
        //["Paris", "2011-06-12", 5],
        //["Paris", "2011-06-19", 2],
        ["Paris", "2011-06-26", 32],
        ["Paris", "2011-07-03", 24],
        ["Paris", "2011-07-10", 80],
        ["Paris", "2011-07-17", 90],
        ["Paris", "2011-07-24", 53],
        ["Paris", "2011-07-31", 17],
        ["Paris", "2011-08-07", 20],
        //["Paris", "2011-08-14", 0],
        ["Paris", "2011-08-21", 43],
        //["Paris", "2011-08-28", 40],
        //
        ["Lisbon", "2011-06-12", 30],
        ["Lisbon", "2011-07-03", 60],
        ["Lisbon", "2011-07-10", 80],
        ["Lisbon", "2011-07-17", 15]//,
        // ["Lisbon", "2011-07-24", 3]
      ],
      "metadata": [
        {
          "colIndex": 0,
          "colType": "String",
          "colName": "City"
        }, {
          "colIndex": 1,
          "colType": "String",
          "colName": "Date"
        }, {
          "colIndex": 2,
          "colType": "Numeric",
          "colName": "Quantity"
        }
      ]
    };

    var render_chart = new CccMetricLineChartComponent({
      type: "cccMetricLineChart",
      name: "cccChart",
      executeAtStart: false,
      htmlObject: "sampleObject",
      chartDefinition: {
        //compatVersion: 1,
        width:  600,
        height: 250,

        // Data source
        crosstabMode: false,

        // Data
        timeSeries: true,
        readers: ['series, x, y'],

        // Plots
        plots: [
          {
            // Main plot
            name: 'main',
            areasVisible: true,
            line_interpolate: 'monotone',
            area_interpolate: 'monotone'
            //dotsVisible:  true,
            //dot_shapeSize:  7
          }
        ],

        // Cartesian axes
        axisGrid:   true,
        axisGrid_strokeStyle: '#F7F8F9',
        axisLabel_font: 'normal 9px "Open Sans"',

        // Panels
        title:  "Categorical Line Chart",
        titleFont: 'lighter 20px "Open Sans"',
        titleMargins: '0 0 5 0',
        legend: true,
        legendFont: 'normal 11px "Open Sans"',

        // Chart/Interaction
        animate:    false,
        selectable: true,
        hoverable:  true,

        // Color axes
        colors: [
          '#005CA7', '#FFC20F', '#333333'
        ]
      }
    });

    dashboard.addComponent(render_chart);

    dashboard.postInit = function initDummyData() {
      render_chart.render(relational_01);
    };

    dashboard.init();
  });
</script>
